<template>
  <div>
    <!-- 拼团订单-->
    <!-- 表单 -->
    <el-form ref="form" :model="form" label-width="80px" :inline="true">
      <el-form-item label="商品类型">
        <el-select v-model="form.size" placeholder="请选择">
          <el-option label="小班课" value="daban"></el-option>
          <el-option label="大班课" value="daban"></el-option>
          <el-option label="点播课" value="dianbo"></el-option>
          <el-option label="音频课" value="yinpin"></el-option>
          <el-option label="图文课" value="tuwen"></el-option>
          <el-option label="面授课" value="miansou"></el-option>
          <el-option label="系统课" value="xitong"></el-option>
          <el-option label="图书" value="books"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="form.status" placeholder="请选择">
          <el-option label="待支付" value="zf"></el-option>
          <el-option label="拼团中" value="pt"></el-option>
          <el-option label="已完成" value="wc"></el-option>
          <el-option label="代发货" value="fh"></el-option>
          <el-option label="退款成功" value="tk"></el-option>
          <el-option label="退款中" value="tkz"></el-option>
          <el-option label="退款申请中" value="sq"></el-option>
          <el-option label="已关闭" value="gj"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付类型">
        <el-select v-model="form.pay" placeholder="请选择">
          <el-option label="微信" value="wx"></el-option>
          <el-option label="支付宝" value="zfb"></el-option>
          <el-option label="虚拟币支付" value="xn"></el-option>
          <el-option label="苹果支付" value="pg"></el-option>
          <el-option label="赠送" value="zs"></el-option>
          <el-option label="优惠券支付" value="yh"></el-option>
          <el-option label="线下支付" value="xx"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下单时间">
        <el-date-picker
          type="date"
          placeholder="开始日期一结束日期"
          v-model="form.date1"
          style="width: 300px"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input
          v-model="form.shopName"
          placeholder="请输入商品名称关键字"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input
          v-model="form.order"
          placeholder="请输入订单编号关键字"
        ></el-input>
      </el-form-item>
      <el-form-item label="图编号">
        <el-input
          v-model="form.number"
          placeholder="请输入图编号关键字"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.tel" placeholder="请输入买家手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh-left">重置</el-button>
      </el-form-item>
    </el-form>
    <p>
      <el-button type="primary" @click="onExport">批量导出</el-button>
      <el-button type="primary">查看报表</el-button>
    </p>
    <!-- 表格数据 -->
    <p>
      <el-table :data="list" stripe border style="width: 100%">
        <el-table-column
          prop="shop_name"
          label="商品名称"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="order_price"
          label="单价(元)/数量"
          width="180"
        ></el-table-column>
        <el-table-column prop="order_status" label="订单状态"></el-table-column>
        <el-table-column prop="address" label="退款维权"></el-table-column>
        <el-table-column prop="nickname" label="买家"></el-table-column>
        <el-table-column prop="mobile" label="买家手机号"></el-table-column>
        <el-table-column prop="address" label="实付金额"></el-table-column>
        <el-table-column label="操作"></el-table-column>
      </el-table>
    </p>
    <!-- 分页 -->
    <p style="text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[4, 8, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.length"
      ></el-pagination>
    </p>
    <!-- 弹框 -->
    <!-- Form -->
    <el-dialog title="导出拼团订单" :visible.sync="show">
      <el-form :model="forms">
        <el-form-item label="任务名称" :label-width="formLabelWidth">
          <el-input v-model="forms.task" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="yes">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getFinance } from "../../api";
export default {
  data() {
    return {
      form: {
        size: "",
        status: "",
        pay: "",
        shopName: "",
        order: "",
        number: "",
        tel: ""
      },
      forms: { task: "" },
      // 每页几条数据
      pageSize: 4,
      // 第几页
      pageNum: 1,
      // 数据
      list: [],
      show: false,
      formLabelWidth: "120px"
    };
  },
  mounted() {
    // getFinance().then((res) => {
    //   console.log(res);
    //   this.list = res.data.list;
    // });
  },
  methods: {
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pageNum = val;
    },
    // 批量导出
    onExport() {
      this.show = true;
    },
    yes() {
      this.show = false;
      this.$router.push({
        path: "/Looklist",
        query: {
          val: this.forms.task
        }
      });
    }
  }
};
</script>

<style lang="scss">
.title {
  background-color: #fff;
  border-bottom: 1px solid #cccccc;
  box-sizing: border-box;
  padding: 10px 20px;
  margin-bottom: 30px;
  // text-align: right;
}
.el-table th,
.el-table tr {
  background-color: #eeeeee;
  color: black;
}
</style>
